<template>
  <div class="width1200 margin-center mgt-20">
    <div class="breadcrumb flex-center">
      <p class="title">名师堂</p>
    </div>
    <search-box></search-box>
    <div>
      <div class="teach-box flex-between-center">
        <div
          v-for="item in teachList"
          :key="item.name"
          class="teach-child flex-center-c hand"
          @click="
            {
              $router.push('teacherDonDateil');
            }
          "
        >
          <el-image class="avter mgb-20" :src="item.url" fit="cover"></el-image>
          <p class="teach-name mgb-5">{{ item.name }}</p>
          <img src="icon1" alt="" class="line2 mgb-5" />
          <p style="width: 135px; text-align: center" class="mgb-10">
            {{ item.uni }}
          </p>
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <pager></pager>
  </div>
</template>
<script>
import SearchBox from "../components/SearchBox";
import pager from "../components/pager";
export default {
  name: "teacherDon",
  components: {
    SearchBox,
    pager,
  },
  data() {
    return {
      icon1: require("../assets/img/index/img-77.png"),
      teachList: [
        {
          name: "李晓东",
          url: require("../assets/img/index/img-2.png"),
          uni: "北京师范大学教授",
        },
        {
          name: "李焦",
          url: require("../assets/img/index/img-2.png"),
          uni: "清华大学副教授",
        },
        {
          name: "刘波",
          url: require("../assets/img/index/img-2.png"),
          uni: "国防大学副教授",
        },
        {
          name: "陈科",
          url: require("../assets/img/index/img-2.png"),
          uni: "成都市优秀班主任",
        },
        {
          name: "黄晶晶",
          url: require("../assets/img/index/img-2.png"),
          uni: "四川省道德与法治赛课 一等奖获得者",
        },
      ],
    };
  },
  methods: {},
};
</script>
<style lang="less" scoped>
@import "../assets/css/variable.less";
.teach-child {
  width: 15.5%;
  padding: 20px;
  box-shadow: 1px 2px 33px 5px rgba(204, 204, 204, 0.12);
  border-radius: 1px;
}
.teach-name {
  font-size: 16px;
  color: #333333;
  font-weight: 400;
}
.avter {
  width: 115px;
  height: 115px;
}
.line2 {
  width: 15px;
  height: 2px;
  background: #cb3e3e;
}
</style>